<div class="row-fluid">

    <div class="span12">

        <!-- BEGIN STYLE CUSTOMIZER -->

        <div class="color-panel hidden-phone">

            <div class="color-mode-icons icon-color"></div>

            <div class="color-mode-icons icon-color-close"></div>

            <div class="color-mode">

                <p>THEME COLOR</p>

                <ul class="inline">

                    <li class="color-black current color-default" data-style="default"></li>

                    <li class="color-blue" data-style="blue"></li>

                    <li class="color-brown" data-style="brown"></li>

                    <li class="color-purple" data-style="purple"></li>

                    <li class="color-grey" data-style="grey"></li>

                    <li class="color-white color-light" data-style="light"></li>

                </ul>

                <label>

                    <span>Layout</span>

                    <select class="layout-option m-wrap small">

                        <option value="fluid" selected="">Fluid</option>

                        <option value="boxed">Boxed</option>

                    </select>

                </label>

                <label>

                    <span>Header</span>

                    <select class="header-option m-wrap small">

                        <option value="fixed" selected="">Fixed</option>

                        <option value="default">Default</option>

                    </select>

                </label>

                <label>

                    <span>Sidebar</span>

                    <select class="sidebar-option m-wrap small">

                        <option value="fixed">Fixed</option>

                        <option value="default" selected="">Default</option>

                    </select>

                </label>

                <label>

                    <span>Footer</span>

                    <select class="footer-option m-wrap small">

                        <option value="fixed">Fixed</option>

                        <option value="default" selected="">Default</option>

                    </select>

                </label>

            </div>

        </div>

        <!-- END BEGIN STYLE CUSTOMIZER --> 

        <!-- BEGIN PAGE TITLE & BREADCRUMB-->

        <h3 class="page-title">

            Horzontal &amp; Sidebar Menu <small>horizontal &amp; sidebar menu layout</small>

        </h3>

        <ul class="breadcrumb">

            <li>

                <i class="icon-home"></i>

                <a href="index.html">Home</a> 

                <i class="icon-angle-right"></i>

            </li>

            <li>

                <a href="#">Layouts</a>

                <i class="icon-angle-right"></i>

            </li>

            <li><a href="#">Horzontal &amp; Sidebar Menu</a></li>

        </ul>

        <!-- END PAGE TITLE & BREADCRUMB-->

    </div>

</div>

<div class="row-fluid">

    <div class="span12">

        <!-- BEGIN EXAMPLE TABLE PORTLET-->

        <div class="portlet box light-grey">

            <div class="portlet-title">

                <div class="caption"><i class="icon-globe"></i>Managed Table</div>

                <div class="tools">

                    <a href="javascript:;" class="collapse"></a>

                    <a href="#portlet-config" data-toggle="modal" class="config"></a>

                    <a href="javascript:;" class="reload"></a>

                    <a href="javascript:;" class="remove"></a>

                </div>

            </div>

            <div class="portlet-body">

                <div class="clearfix">

                    <div class="btn-group">

                        <button id="sample_editable_1_new" class="btn green">

                            Add New <i class="icon-plus"></i>

                        </button>

                    </div>

                    <div class="btn-group pull-right">

                        <button class="btn dropdown-toggle" data-toggle="dropdown">Tools <i class="icon-angle-down"></i>

                        </button>

                        <ul class="dropdown-menu pull-right">

                            <li><a href="#">Print</a></li>

                            <li><a href="#">Save as PDF</a></li>

                            <li><a href="#">Export to Excel</a></li>

                        </ul>

                    </div>

                </div>

                <div id="sample_1_wrapper" class="dataTables_wrapper form-inline" role="grid"><div class="row-fluid"><div class="span6"><div id="sample_1_length" class="dataTables_length"><label><select size="1" name="sample_1_length" aria-controls="sample_1" class="m-wrap small"><option value="5" selected="selected">5</option><option value="15">15</option><option value="20">20</option><option value="-1">All</option></select> records per page</label></div></div><div class="span6"><div class="dataTables_filter" id="sample_1_filter"><label>Search: <input type="text" aria-controls="sample_1" class="m-wrap medium"></label></div></div></div><table class="table table-striped table-bordered table-hover dataTable" id="sample_1" aria-describedby="sample_1_info">

                        <thead>

                            <tr role="row"><th style="width: 24px;" class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label=""><div class="checker"><span><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"></span></div></th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 239px;">Username</th><th class="hidden-480 sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="Email" style="width: 485px;">Email</th><th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Points: activate to sort column ascending" style="width: 190px;">Points</th><th class="hidden-480 sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="Joined" style="width: 314px;">Joined</th><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="" style="width: 262px;"></th></tr>

                        </thead>



                        <tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="gradeX odd">

                                <td class=" sorting_1"><div class="checker"><span><input type="checkbox" class="checkboxes" value="1"></span></div></td>

                                <td class=" ">shuxer</td>

                                <td class="hidden-480 "><a href="mailto:shuxer@gmail.com">shuxer@gmail.com</a></td>

                                <td class="hidden-480 ">120</td>

                                <td class="center hidden-480 ">12 Jan 2012</td>

                                <td class=" "><span class="label label-success">Approved</span></td>

                            </tr><tr class="gradeX even">

                                <td class=" sorting_1"><div class="checker"><span><input type="checkbox" class="checkboxes" value="1"></span></div></td>

                                <td class=" ">looper</td>

                                <td class="hidden-480 "><a href="mailto:looper90@gmail.com">looper90@gmail.com</a></td>

                                <td class="hidden-480 ">120</td>

                                <td class="center hidden-480 ">12.12.2011</td>

                                <td class=" "><span class="label label-warning">Suspended</span></td>

                            </tr><tr class="odd gradeX">

                                <td class=" sorting_1"><div class="checker"><span><input type="checkbox" class="checkboxes" value="1"></span></div></td>

                                <td class=" ">userwow</td>

                                <td class="hidden-480 "><a href="mailto:userwow@yahoo.com">userwow@yahoo.com</a></td>

                                <td class="hidden-480 ">20</td>

                                <td class="center hidden-480 ">12.12.2012</td>

                                <td class=" "><span class="label label-success">Approved</span></td>

                            </tr><tr class="odd gradeX even">

                                <td class=" sorting_1"><div class="checker"><span><input type="checkbox" class="checkboxes" value="1"></span></div></td>

                                <td class=" ">user1wow</td>

                                <td class="hidden-480 "><a href="mailto:userwow@gmail.com">userwow@gmail.com</a></td>

                                <td class="hidden-480 ">20</td>

                                <td class="center hidden-480 ">12.12.2012</td>

                                <td class=" "><span class="label label-inverse">Blocked</span></td>

                            </tr><tr class="odd gradeX">

                                <td class=" sorting_1"><div class="checker"><span><input type="checkbox" class="checkboxes" value="1"></span></div></td>

                                <td class=" ">restest</td>

                                <td class="hidden-480 "><a href="mailto:userwow@gmail.com">test@gmail.com</a></td>

                                <td class="hidden-480 ">20</td>

                                <td class="center hidden-480 ">12.12.2012</td>

                                <td class=" "><span class="label label-success">Approved</span></td>

                            </tr></tbody></table><div class="row-fluid"><div class="span6"><div class="dataTables_info" id="sample_1_info">Showing 1 to 5 of 25 entries</div></div><div class="span6"><div class="dataTables_paginate paging_bootstrap pagination"><ul><li class="prev disabled"><a href="#">← <span class="hidden-480">Prev</span></a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li class="next"><a href="#"><span class="hidden-480">Next</span> → </a></li></ul></div></div></div></div>

            </div>

        </div>

        <!-- END EXAMPLE TABLE PORTLET-->

    </div>

</div>

<script type="text/javascript">
jQuery(document).ready(function(){
    TableManaged.init();
})
</script>